<template>
  <div class="tablePageWarp">
    <!-- 搜索区域 -->
    <div class="tableListSearch">
      <flow-design-search @clickbtn="handleClickSearchBtn"></flow-design-search>
    </div>
    <!-- 操作区域 -->
    <div class="tableListAction">
      <auth-button type="primary" :auth="flowPerms.design.add" @click="handleAddNewFlow">
        <i class="iconfont icon-xinjian"></i>
        {{ $t('newly') }}
      </auth-button>
      <auth-button
        type="danger"
        :auth="flowPerms.design.delete"
        @click="handleBatchDelete"
        :disabled="disableBatchDeleteBtn"
      >
        <i class="iconfont icon-suoxiao1"></i>
        {{ $t('multiDel') }}
      </auth-button>
    </div>
    <!-- 列表区域 -->
    <div class="tableListMain commonTableSty">
      <flow-design-table-list
        ref="flowDesignTableComp"
        :tableData="childTableData"
        @selectedRowchange="handleselectedRowchange"
        @operateRow="handleOperateRow"
      ></flow-design-table-list>
    </div>
    <!-- 新增对话框 -->
    <a-modal :title="$t('addNewFlowConfig')" :visible="showAddModal">
      <a-form-model :model="form" v-bind="layout">
        <a-form-model-item :label="$t('business')">
          <a-select v-model="form.business" placeholder="please select your zone">
            <a-select-option value="shanghai"> Seletion one </a-select-option>
            <a-select-option value="beijing"> Seletion two </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('flow')">
          <a-select v-model="form.region" placeholder="please select your zone">
            <a-select-option value="shanghai"> Seletion one </a-select-option>
            <a-select-option value="beijing"> Seletion two </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item :label="$t('remark')">
          <a-input v-model="form.desc" type="textarea" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="cancel" @click="handleCancel">{{ $t('cancel') }}</a-button>
        <a-button key="submit" type="primary" @click="handleOk">{{ $t('save') }}</a-button>
      </template>
    </a-modal>
    <!-- 二次确认是否删除对话框 -->
    <!-- <a-modal :title="$t('systemTip')" :visible="showConfirmDelete" @cancel="() => (showConfirmDelete = false)">
      <p>{{ replacedTip }}</p>
    </a-modal> -->
  </div>
</template>
<script>
import i18n from '@/lang'
import { mapState } from 'vuex'
import flowDesignApi from '@/api/modules/flowManage/flowDesign'
import FlowDesignSearch from './components/FlowDesignSearch.vue'
import FlowDesignTableList from './components/FlowDesignTableList.vue'
import AuthButton from '@/components/AuthButton'
import { flowPerms } from '@/config/permission/index'
export default {
  components: {
    FlowDesignSearch,
    FlowDesignTableList,
    AuthButton
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.flowRelatedConfig.queryParams
    }),
    replacedDeleteTip () {
      return i18n.t('batchDeleteFlowTip').replace('__ Selected__', '"' + this.selectedRowFlowName + '"')
    },
    replacedBatchDeleteTip () {
      return i18n.t('batchDeleteFlowTip').replace('__ Selected__', '"' + this.selectedRowsName + '"')
    }
  },
  data () {
    return {
      flowPerms,
      showAddModal: false,
      selectedRowKeys: [],
      disableBatchDeleteBtn: true,
      form: {
        business: '',
        region: '',
        desc: '',
        layout: 'horizontal'
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      childTableData: [],
      selectedRowFlowName: '',
      selectedRowsName: '',
      selectedIdArr: []
    }
  },
  created () {},
  watch:{
  },
  mounted () {
    this.initiSearchValue()
  },
  methods: {
    // 搜索条件 重置和初始化
    initiSearchValue () {
      this.$store.commit('resetFlowDesignQueryParams')
      this.$refs.flowDesignTableComp.refreshData(true)
    },
    // 顶部搜索区域点击查询按钮
    handleClickSearchBtn (data) {
      console.log(data, '表格组件传过来的参数', this.queryParams, '查询参数')
      this.$refs.flowDesignTableComp.refreshData()
    },
    // 点击新增按钮
    handleAddNewFlow () {
      this.$router.push({ name: 'flowDesignAdd' })
    },
    // 对话框点击取消
    handleCancel () {
      this.showAddModal = false
    },
    // 对话框点击保存
    handleOk () {
      this.showAddModal = false
    },
    // 点击批量删除按钮
    handleBatchDelete () {
      if (this.selectedRowKeys.length > 0) {
        const that = this
        this.$confirm({
          title: that.$t('systemTip'),
          content: that.replacedBatchDeleteTip,
          onOk () {
            flowDesignApi
              .deleteFlowDesin(that.selectedIdArr)
              .then((res) => {
                console.log(res)
              })
              .catch((res) => {
                console.log(res.message || this.$t('5001'))
              })
              .finally(() => {
                that.$refs.flowDesignTableComp.emptyTableSelction()
                that.$refs.flowDesignTableComp.refreshData()
              })
          },
          onCancel () {}
        })
      } else {
        this.disableBatchDeleteBtn = true
      }
    },
    // 表格组件选择项改变后传递上来触发的事件
    handleselectedRowchange (data) {
      if (data.length > 0) {
        this.disableBatchDeleteBtn = false
        const selectedNameArr = data.map((item) => {
          return item.definitionName + '[' + item.definitionCode + ']'
        })
        this.selectedIdArr = data.map((item) => {
          return item.definitionId
        })
        this.selectedRowsName = selectedNameArr.toString()
      } else {
        this.disableBatchDeleteBtn = true
      }
      this.selectedRowKeys = data
    },
    // 为了模拟删除和编辑，实现的子组件事件
    handleOperateRow (data) {
      const method = data[0] + 'FlowDesign'
      if (this[method]) {
        this[method](data[1])
      }
    },
    // 编辑流程设计
    editFlowDesign (record) {
      this.$router.push({ path: '/flow/designEdit', query: { id: record.definitionId } })
    },
    // 删除流程设计
    deleteFlowDesign (data) {
      this.selectedRowFlowName = data.definitionName + '[' + data.definitionCode + ']'
      const that = this
      this.$confirm({
        title: that.$t('systemTip'),
        content: that.replacedDeleteTip,
        onOk () {
          flowDesignApi
            .deleteFlowDesin([data.definitionId])
            .then((res) => {
              console.log(res)
            })
            .catch((res) => {
              console.log(res.message || this.$t('5001'))
            })
            .finally(() => {
              console.log('done')
              that.$refs.flowDesignTableComp.refreshData()
            })
        },
        onCancel () {}
      })
    },
    lookFlowDesign (record) {
      this.$router.push({ path: '/flow/designDetail', query: { id: record.definitionId } })
    }
  }
}
</script>
<style lang="less" scoped>
// .tableListPage {
//   padding: 24px 24px 8px 24px;
//   height: 100%;
//   overflow: auto;
  .tableListAction {
    margin-top: 16px;
    button {
      margin-right: 16px;
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .tableListMain {
    margin-top: 16px;
  }
// }
</style>
